"use client"

import { Button, Flex } from "@radix-ui/themes"
import { useCallback, useEffect, useRef, useState } from "react"
import UiModal from "./ui/UiModal"
import useAvatarCanvas from "@/hooks/useAvatarCanvas"
import UiButton from "./ui/UiButton"


export type UploadAvatarProps = React.PropsWithChildren<{
    onUpload:(base64:string)=>boolean | Promise<boolean>
}>
const UploadAvatar = ({
    children,
    onUpload
}: UploadAvatarProps) => {
    const [open, setOpen] = useState(false);
    const onCancel = useCallback(() => setOpen(false), []);
    const onClick = useCallback(() => setOpen(true), []);
    const ref50 = useRef<HTMLCanvasElement>(null);
    const ref100 = useRef<HTMLCanvasElement>(null);
    const { show, canvasRef, upd, onMoveDown, result } = useAvatarCanvas();
    useEffect(() => {
        if (!result) return;
        const img = new Image();
        img.src = result;
        img.onload = () => {
            if (!ref50.current) return;
            if (!ref100.current) return;
            const r50 = ref50.current.getContext("2d");
            const r100 = ref100.current.getContext("2d");
            if (!r100 || !r50) return;
            r50.clearRect(0, 0, 50, 50);
            r100.clearRect(0, 0, 100, 100);
            r50.drawImage(img, 0, 0, 50, 50);
            r100.drawImage(img, 0, 0, 100, 100);
        }
    }, [result])
    const clickInput = useCallback(() => {
        show()
    }, [])
    const wheel = useCallback((e: any) => {
        const { deltaY } = e;
        upd(deltaY < 0)
    }, [upd]);
    const onFinish = useCallback(() => {
        const p = onUpload(result.slice(result.indexOf(",") + 1));
        if (p instanceof Promise) {
            p.then((e) => message.success(e))
                .catch(err => {
                    if (!!err.message) message.error(err.message)
                })
                .finally(() => {
                    onCancel();
                });
        }
    }, [result])
    const add = useCallback(() => {
        upd(true)
    }, [upd])
    const sub = useCallback(() => {
        upd(false)
    }, [upd])
    return (
        <Flex align="center" justify="center">
            <div className="rounded-full overflow-hidden relative" onClick={onClick}>
                {children}
                <div className="w-full h-full hover:opacity-40 bg-black cursor-pointer absolute top-0 left-0 opacity-0 transition duration-400"></div>
            </div>
            <UiModal
                open={open}
                onCancel={onCancel}
                title="更换头像"
                okText=""
                width={500}
            >
                <Flex className="w-full">
                    <Flex className="w-80 relative">
                        <canvas
                            width={300}
                            height={300}
                            className="w-80 h-80"
                            ref={canvasRef}
                        />
                        <div
                            onMouseDown={onMoveDown}
                            onWheel={wheel}
                            className="w-full h-full absolute top-0 left-0 bg-cover bg-center bg-no-repeat bg-[url('/upload-border.png')]"
                        />
                    </Flex>
                    <div className="w-32">
                        <div className="text-center">预览</div>
                        <Flex justify='center' align="center">
                            <canvas ref={ref50} width={50} height={50}></canvas>
                        </Flex>
                        <div className="text-center">50x50</div>
                        <div className="h-5"></div>
                        <Flex align="center" justify='center'>
                            <canvas ref={ref100} width={100} height={100}></canvas>
                        </Flex>
                        <div className="text-center">100x100</div>
                    </div>
                </Flex>
                <Flex gap='2'>
                    <Flex gap='2' className="w-80" justify='center' align='center'>
                        <div onClick={add} className="mr-2 cursor-pointer font-bold text-2xl">
                            +
                        </div>
                        <div onClick={sub} className="ml-2 cursor-pointer font-bold text-2xl">
                            -
                        </div>
                    </Flex>
                    <Flex gap='2' justify='center' className="w-32" align='center'>
                        <div
                            onClick={clickInput}
                            className="pr-4 cursor-pointer"
                        >
                            上传
                        </div>
                        <UiButton
                            onClick={onFinish}
                        >
                            确定
                        </UiButton>
                    </Flex>
                </Flex>
            </UiModal>
        </Flex>
    )
}
export default UploadAvatar